<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL操作测试例子</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            text-align: center;
            color: #2c3e50;
            margin-bottom: 30px;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        h2 {
            color: #3498db;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-top: 0;
        }
        .test-section {
            margin-bottom: 25px;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #fafafa;
        }
        .test-section h3 {
            color: #2980b9;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #555;
        }
        input, select, button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        input[type="text"] {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
        }
        button {
            background-color: #3498db;
            color: white;
            border: none;
            cursor: pointer;
            padding: 10px 15px;
            font-size: 14px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .result {
            margin-top: 15px;
            padding: 15px;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 300px;
            overflow-y: auto;
        }
        .copy-button {
            float: right;
            background-color: #28a745;
            font-size: 12px;
            padding: 5px 10px;
            margin-top: -5px;
        }
        .copy-button:hover {
            background-color: #218838;
        }
        .clear-button {
            background-color: #dc3545;
            margin-left: 10px;
        }
        .clear-button:hover {
            background-color: #c82333;
        }
        .row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .col {
            flex: 1;
            min-width: 200px;
        }
        .operation-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }
        .operation-buttons button {
            flex: 1;
            min-width: 120px;
        }
        .parameter-item {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }
        .parameter-item input {
            flex: 1;
        }
        .remove-param {
            background-color: #dc3545;
            padding: 5px 10px;
            font-size: 12px;
        }
        .add-param {
            background-color: #28a745;
            margin-left: auto;
        }
        @media (max-width: 768px) {
            .row {
                flex-direction: column;
            }
            .col {
                width: 100%;
            }
            .operation-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <h1>URL操作测试例子</h1>
    
    <div class="container">
        <h2>URL基本操作</h2>
        
        <div class="test-section">
            <h3>URL基本信息解析</h3>
            <div class="input-group">
                <label for="url-input">输入URL：</label>
                <input type="text" id="url-input" value="https://www.example.com:8080/path/to/resource?key1=value1&key2=value2#section1" placeholder="请输入URL">
                <button id="parse-url-btn">解析URL</button>
                <button id="clear-result-btn" class="clear-button">清空结果</button>
            </div>
            <div class="result" id="parse-result">
                <!-- 解析结果将显示在这里 -->
            </div>
        </div>
        
        <div class="test-section">
            <h3>URL各部分获取和设置</h3>
            <div class="row">
                <div class="col">
                    <label for="url-part-input">原始URL：</label>
                    <input type="text" id="url-part-input" value="https://www.example.com/path" placeholder="请输入URL">
                </div>
                <div class="col">
                    <label for="url-part-type">操作类型：</label>
                    <select id="url-part-type">
                        <option value="protocol">协议</option>
                        <option value="hostname">主机名</option>
                        <option value="port">端口</option>
                        <option value="pathname">路径名</option>
                        <option value="hash">锚点</option>
                    </select>
                </div>
                <div class="col">
                    <label for="url-part-value">新值（设置时使用）：</label>
                    <input type="text" id="url-part-value" placeholder="新值">
                </div>
            </div>
            <div class="operation-buttons">
                <button id="get-url-part-btn">获取部分值</button>
                <button id="set-url-part-btn">设置部分值</button>
            </div>
            <div class="result" id="url-part-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
    </div>
    
    <div class="container">
        <h2>查询参数操作</h2>
        
        <div class="test-section">
            <h3>参数解析</h3>
            <div class="input-group">
                <label for="query-params-input">查询字符串（可包含或不包含?）：</label>
                <input type="text" id="query-params-input" value="?key1=value1&key2=value2&key3=value3" placeholder="请输入查询字符串">
                <button id="parse-params-btn">解析参数</button>
            </div>
            <div class="result" id="parse-params-result">
                <!-- 解析结果将显示在这里 -->
            </div>
        </div>
        
        <div class="test-section">
            <h3>参数生成</h3>
            <div id="params-container">
                <div class="parameter-item">
                    <input type="text" class="param-key" placeholder="参数名" value="name">
                    <input type="text" class="param-value" placeholder="参数值" value="张三">
                    <button class="remove-param">删除</button>
                </div>
                <div class="parameter-item">
                    <input type="text" class="param-key" placeholder="参数名" value="age">
                    <input type="text" class="param-value" placeholder="参数值" value="25">
                    <button class="remove-param">删除</button>
                </div>
            </div>
            <button class="add-param">添加参数</button>
            <button id="generate-query-btn">生成查询字符串</button>
            <div class="result" id="generate-query-result">
                <!-- 生成结果将显示在这里 -->
            </div>
        </div>
        
        <div class="test-section">
            <h3>动态URL参数操作</h3>
            <div class="input-group">
                <label for="dynamic-url-input">基础URL：</label>
                <input type="text" id="dynamic-url-input" value="https://api.example.com/users" placeholder="请输入基础URL">
            </div>
            <div class="row">
                <div class="col">
                    <label for="param-key">参数名：</label>
                    <input type="text" id="param-key" placeholder="参数名">
                </div>
                <div class="col">
                    <label for="param-value">参数值：</label>
                    <input type="text" id="param-value" placeholder="参数值">
                </div>
            </div>
            <div class="operation-buttons">
                <button id="add-single-param-btn">添加单个参数</button>
                <button id="get-single-param-btn">获取参数值</button>
                <button id="delete-single-param-btn">删除参数</button>
                <button id="check-param-exists-btn">检查参数是否存在</button>
            </div>
            <div class="result" id="dynamic-param-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
    </div>
    
    <div class="container">
        <h2>高级URL操作</h2>
        
        <div class="test-section">
            <h3>URL比较和克隆</h3>
            <div class="row">
                <div class="col">
                    <label for="url-compare-1">URL 1：</label>
                    <input type="text" id="url-compare-1" value="https://www.example.com" placeholder="URL 1">
                </div>
                <div class="col">
                    <label for="url-compare-2">URL 2：</label>
                    <input type="text" id="url-compare-2" value="https://www.example.com/path" placeholder="URL 2">
                </div>
            </div>
            <div class="operation-buttons">
                <button id="compare-urls-btn">比较URLs</button>
                <button id="clone-url-btn">克隆URL 1</button>
            </div>
            <div class="result" id="compare-clone-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
        
        <div class="test-section">
            <h3>URL编码和解码</h3>
            <div class="row">
                <div class="col">
                    <label for="encode-input">要编码的内容：</label>
                    <input type="text" id="encode-input" value="中文 & symbols?" placeholder="输入要编码的内容">
                </div>
                <div class="col">
                    <label for="decode-input">要解码的内容：</label>
                    <input type="text" id="decode-input" value="%E4%B8%AD%E6%96%87%20%26%20symbols%3F" placeholder="输入要解码的内容">
                </div>
            </div>
            <div class="operation-buttons">
                <button id="encode-url-btn">编码URL</button>
                <button id="decode-url-btn">解码URL</button>
                <button id="encode-component-btn">编码组件</button>
                <button id="decode-component-btn">解码组件</button>
            </div>
            <div class="result" id="encode-decode-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
        
        <div class="test-section">
            <h3>路径合并</h3>
            <div class="row">
                <div class="col">
                    <label for="base-path">基础路径：</label>
                    <input type="text" id="base-path" value="https://api.example.com" placeholder="基础路径">
                </div>
                <div class="col">
                    <label for="relative-path">相对路径：</label>
                    <input type="text" id="relative-path" value="users/profile" placeholder="相对路径">
                </div>
            </div>
            <button id="merge-path-btn">合并路径</button>
            <div class="result" id="merge-path-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
    </div>
    
    <div class="container">
        <h2>链式调用示例</h2>
        
        <div class="test-section">
            <h3>复杂URL构建</h3>
            <button id="chain-example-btn">执行链式调用示例</button>
            <div class="result" id="chain-example-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
        
        <div class="test-section">
            <h3>当前页面URL操作</h3>
            <button id="current-url-btn">获取当前页面URL信息</button>
            <div class="result" id="current-url-result">
                <!-- 结果将显示在这里 -->
            </div>
        </div>
    </div>

    <script type="module">
        // 导入URL操作类
        import URL操作 from '../../zh/前端/zh-url.js';
        
        // 显示结果的通用函数
        function 更新结果(元素Id, 内容) {
            const 结果元素 = document.getElementById(元素Id);
            结果元素.textContent = typeof 内容 === 'object' ? JSON.stringify(内容, null, 2) : 内容;
        }
        
        // 复制结果到剪贴板
        document.querySelectorAll('.result').forEach(结果元素 => {
            const 复制按钮 = document.createElement('button');
            复制按钮.className = 'copy-button';
            复制按钮.textContent = '复制';
            复制按钮.onclick = () => {
                navigator.clipboard.writeText(结果元素.textContent).then(() => {
                    const 原文本 = 复制按钮.textContent;
                    复制按钮.textContent = '已复制！';
                    setTimeout(() => 复制按钮.textContent = 原文本, 2000);
                }).catch(err => {
                    console.error('复制失败:', err);
                });
            };
            结果元素.parentNode.insertBefore(复制按钮, 结果元素.nextSibling);
        });
        
        // 测试1: URL基本信息解析
        document.getElementById('parse-url-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('url-input').value;
            if (!url输入) {
                更新结果('parse-result', '请输入URL');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                const 解析结果 = {
                    '完整路径': url.获取完整路径(),
                    '协议': url.获取协议(),
                    '主机名': url.获取主机名(),
                    '端口': url.获取端口(),
                    '路径名': url.获取路径名(),
                    '查询字符串': url.获取查询字符串(),
                    '锚点': url.获取锚点(),
                    '参数对象': url.解析参数()
                };
                更新结果('parse-result', 解析结果);
            } catch (error) {
                更新结果('parse-result', `解析错误: ${error.message}`);
            }
        });
        
        // 清空结果
        document.getElementById('clear-result-btn').addEventListener('click', function() {
            document.getElementById('parse-result').textContent = '';
        });
        
        // 测试2: URL各部分获取和设置
        document.getElementById('get-url-part-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('url-part-input').value;
            const 部分类型 = document.getElementById('url-part-type').value;
            
            if (!url输入) {
                更新结果('url-part-result', '请输入URL');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                let 结果;
                
                switch (部分类型) {
                    case 'protocol':
                        结果 = url.获取协议();
                        break;
                    case 'hostname':
                        结果 = url.获取主机名();
                        break;
                    case 'port':
                        结果 = url.获取端口();
                        break;
                    case 'pathname':
                        结果 = url.获取路径名();
                        break;
                    case 'hash':
                        结果 = url.获取锚点();
                        break;
                }
                
                更新结果('url-part-result', `当前${部分类型}值: ${结果}`);
            } catch (error) {
                更新结果('url-part-result', `操作错误: ${error.message}`);
            }
        });
        
        document.getElementById('set-url-part-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('url-part-input').value;
            const 部分类型 = document.getElementById('url-part-type').value;
            const 新值 = document.getElementById('url-part-value').value;
            
            if (!url输入 || !新值) {
                更新结果('url-part-result', '请输入URL和新值');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                
                switch (部分类型) {
                    case 'protocol':
                        url.设置协议(新值);
                        break;
                    case 'hostname':
                        url.设置主机名(新值);
                        break;
                    case 'port':
                        url.设置端口(新值);
                        break;
                    case 'pathname':
                        url.设置路径名(新值);
                        break;
                    case 'hash':
                        url.设置锚点(新值);
                        break;
                }
                
                更新结果('url-part-result', `设置后URL: ${url.转字符串()}`);
            } catch (error) {
                更新结果('url-part-result', `操作错误: ${error.message}`);
            }
        });
        
        // 测试3: 参数解析
        document.getElementById('parse-params-btn').addEventListener('click', function() {
            const 查询字符串 = document.getElementById('query-params-input').value;
            if (!查询字符串) {
                更新结果('parse-params-result', '请输入查询字符串');
                return;
            }
            
            try {
                const 参数对象 = URL操作.解析查询字符串(查询字符串);
                更新结果('parse-params-result', 参数对象);
            } catch (error) {
                更新结果('parse-params-result', `解析错误: ${error.message}`);
            }
        });
        
        // 测试4: 参数生成
        document.querySelector('.add-param').addEventListener('click', function() {
            const 容器 = document.getElementById('params-container');
            const 新项目 = document.createElement('div');
            新项目.className = 'parameter-item';
            新项目.innerHTML = `
                <input type="text" class="param-key" placeholder="参数名">
                <input type="text" class="param-value" placeholder="参数值">
                <button class="remove-param">删除</button>
            `;
            容器.appendChild(新项目);
            
            // 为新添加的删除按钮绑定事件
            新项目.querySelector('.remove-param').addEventListener('click', function() {
                新项目.remove();
            });
        });
        
        // 初始绑定删除按钮事件
        document.querySelectorAll('.remove-param').forEach(按钮 => {
            按钮.addEventListener('click', function() {
                this.parentNode.remove();
            });
        });
        
        document.getElementById('generate-query-btn').addEventListener('click', function() {
            const 参数项 = document.querySelectorAll('.parameter-item');
            const 参数对象 = {};
            
            参数项.forEach(项 => {
                const 键 = 项.querySelector('.param-key').value.trim();
                const 值 = 项.querySelector('.param-value').value.trim();
                
                if (键) {
                    参数对象[键] = 值;
                }
            });
            
            try {
                const 查询字符串 = URL操作.对象转查询字符串(参数对象);
                更新结果('generate-query-result', `生成的查询字符串: ${查询字符串}`);
            } catch (error) {
                更新结果('generate-query-result', `生成错误: ${error.message}`);
            }
        });
        
        // 测试5: 动态URL参数操作
        document.getElementById('add-single-param-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('dynamic-url-input').value;
            const 键 = document.getElementById('param-key').value;
            const 值 = document.getElementById('param-value').value;
            
            if (!url输入 || !键) {
                更新结果('dynamic-param-result', '请输入URL和参数名');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                url.添加参数(键, 值);
                更新结果('dynamic-param-result', `添加参数后URL: ${url.转字符串()}`);
            } catch (error) {
                更新结果('dynamic-param-result', `操作错误: ${error.message}`);
            }
        });
        
        document.getElementById('get-single-param-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('dynamic-url-input').value;
            const 键 = document.getElementById('param-key').value;
            
            if (!url输入 || !键) {
                更新结果('dynamic-param-result', '请输入URL和参数名');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                const 参数值 = url.获取参数(键);
                更新结果('dynamic-param-result', 参数值 !== null ? `参数 ${键} 的值: ${参数值}` : `参数 ${键} 不存在`);
            } catch (error) {
                更新结果('dynamic-param-result', `操作错误: ${error.message}`);
            }
        });
        
        document.getElementById('delete-single-param-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('dynamic-url-input').value;
            const 键 = document.getElementById('param-key').value;
            
            if (!url输入 || !键) {
                更新结果('dynamic-param-result', '请输入URL和参数名');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                url.删除参数(键);
                更新结果('dynamic-param-result', `删除参数后URL: ${url.转字符串()}`);
            } catch (error) {
                更新结果('dynamic-param-result', `操作错误: ${error.message}`);
            }
        });
        
        document.getElementById('check-param-exists-btn').addEventListener('click', function() {
            const url输入 = document.getElementById('dynamic-url-input').value;
            const 键 = document.getElementById('param-key').value;
            
            if (!url输入 || !键) {
                更新结果('dynamic-param-result', '请输入URL和参数名');
                return;
            }
            
            try {
                const url = new URL操作(url输入);
                const 是否存在 = url.包含参数(键);
                更新结果('dynamic-param-result', `参数 ${键} ${是否存在 ? '存在' : '不存在'}`);
            } catch (error) {
                更新结果('dynamic-param-result', `操作错误: ${error.message}`);
            }
        });
        
        // 测试6: URL比较和克隆
        document.getElementById('compare-urls-btn').addEventListener('click', function() {
            const url1 = document.getElementById('url-compare-1').value;
            const url2 = document.getElementById('url-compare-2').value;
            
            if (!url1 || !url2) {
                更新结果('compare-clone-result', '请输入两个URL');
                return;
            }
            
            try {
                const urlObj1 = new URL操作(url1);
                const urlObj2 = new URL操作(url2);
                const 是否相等 = urlObj1.是否相等(urlObj2);
                
                更新结果('compare-clone-result', `URL 1: ${url1}\nURL 2: ${url2}\n是否相等: ${是否相等}`);
            } catch (error) {
                更新结果('compare-clone-result', `比较错误: ${error.message}`);
            }
        });
        
        document.getElementById('clone-url-btn').addEventListener('click', function() {
            const url1 = document.getElementById('url-compare-1').value;
            
            if (!url1) {
                更新结果('compare-clone-result', '请输入要克隆的URL');
                return;
            }
            
            try {
                const urlObj1 = new URL操作(url1);
                const 克隆对象 = urlObj1.克隆();
                
                // 修改克隆对象以验证是深拷贝
                克隆对象.添加参数('test', 'cloned');
                
                更新结果('compare-clone-result', `原始URL: ${urlObj1.转字符串()}\n克隆并修改后: ${克隆对象.转字符串()}`);
            } catch (error) {
                更新结果('compare-clone-result', `克隆错误: ${error.message}`);
            }
        });
        
        // 测试7: URL编码和解码
        document.getElementById('encode-url-btn').addEventListener('click', function() {
            const 内容 = document.getElementById('encode-input').value;
            if (!内容) {
                更新结果('encode-decode-result', '请输入要编码的内容');
                return;
            }
            
            try {
                const 编码结果 = URL操作.编码(内容);
                更新结果('encode-decode-result', `编码结果: ${编码结果}`);
            } catch (error) {
                更新结果('encode-decode-result', `编码错误: ${error.message}`);
            }
        });
        
        document.getElementById('decode-url-btn').addEventListener('click', function() {
            const 内容 = document.getElementById('decode-input').value;
            if (!内容) {
                更新结果('encode-decode-result', '请输入要解码的内容');
                return;
            }
            
            try {
                const 解码结果 = URL操作.解码(内容);
                更新结果('encode-decode-result', `解码结果: ${解码结果}`);
            } catch (error) {
                更新结果('encode-decode-result', `解码错误: ${error.message}`);
            }
        });
        
        document.getElementById('encode-component-btn').addEventListener('click', function() {
            const 内容 = document.getElementById('encode-input').value;
            if (!内容) {
                更新结果('encode-decode-result', '请输入要编码的内容');
                return;
            }
            
            try {
                const 编码结果 = URL操作.编码组件(内容);
                更新结果('encode-decode-result', `组件编码结果: ${编码结果}`);
            } catch (error) {
                更新结果('encode-decode-result', `编码错误: ${error.message}`);
            }
        });
        
        document.getElementById('decode-component-btn').addEventListener('click', function() {
            const 内容 = document.getElementById('decode-input').value;
            if (!内容) {
                更新结果('encode-decode-result', '请输入要解码的内容');
                return;
            }
            
            try {
                const 解码结果 = URL操作.解码组件(内容);
                更新结果('encode-decode-result', `组件解码结果: ${解码结果}`);
            } catch (error) {
                更新结果('encode-decode-result', `解码错误: ${error.message}`);
            }
        });
        
        // 测试8: 路径合并
        document.getElementById('merge-path-btn').addEventListener('click', function() {
            const 基础路径 = document.getElementById('base-path').value;
            const 相对路径 = document.getElementById('relative-path').value;
            
            if (!基础路径 || !相对路径) {
                更新结果('merge-path-result', '请输入基础路径和相对路径');
                return;
            }
            
            try {
                const 合并结果 = URL操作.合并路径(基础路径, 相对路径);
                更新结果('merge-path-result', `合并结果: ${合并结果}`);
            } catch (error) {
                更新结果('merge-path-result', `合并错误: ${error.message}`);
            }
        });
        
        // 测试9: 链式调用示例
        document.getElementById('chain-example-btn').addEventListener('click', function() {
            try {
                const url = new URL操作('https://api.example.com')
                    .设置路径名('/users')
                    .添加参数('page', '1')
                    .添加参数('limit', '10')
                    .添加参数('sort', 'created_at')
                    .设置锚点('top')
                    .转字符串();
                
                更新结果('chain-example-result', `链式调用构建的URL: ${url}`);
            } catch (error) {
                更新结果('chain-example-result', `链式调用错误: ${error.message}`);
            }
        });
        
        // 测试10: 当前页面URL操作
        document.getElementById('current-url-btn').addEventListener('click', function() {
            try {
                const url = new URL操作(window.location.href);
                const 当前URL信息 = {
                    '完整路径': url.获取完整路径(),
                    '协议': url.获取协议(),
                    '主机名': url.获取主机名(),
                    '端口': url.获取端口(),
                    '路径名': url.获取路径名(),
                    '查询字符串': url.获取查询字符串(),
                    '锚点': url.获取锚点(),
                    '参数对象': url.解析参数()
                };
                
                更新结果('current-url-result', 当前URL信息);
            } catch (error) {
                更新结果('current-url-result', `获取URL信息错误: ${error.message}`);
            }
        });
        
        // 暴露函数到全局作用域以避免ReferenceError
        window.URL操作 = URL操作;
        window.更新结果 = 更新结果;
    </script>
</body>
</html>